$(function () {


    // ************** 权限操作 ********************
    function selectType(leftSelect,rightSelect) {
        let leftSelectEl = $(leftSelect);
        let rightSelectEl = $(rightSelect);

        leftSelectEl.css("height", parseInt(leftSelectEl.prop("size")) * 31 + 1 + "px");
        leftSelectEl.css("border-bottom", parseInt(leftSelectEl.prop("size")) == 0 ? "0px" : "1px solid #ddd");

        if(parseInt(leftSelectEl.prop("size")) == 0){
            leftSelectEl.next().hide();
        }

        rightSelectEl.css("height", parseInt(rightSelectEl.prop("size")) * 31 + 1 + "px");
        rightSelectEl.css("border-bottom", parseInt(rightSelectEl.prop("size")) == 0 ? "0px" : "1px solid #ddd");
    }

    // 进入页面处理所有的 select 样式
    function markAllSelectType() {
        let allLeftSelect = $("select.leftSelect");
        let rightSelect = $("#authorizeSelect");
        $.each(allLeftSelect,function (i,ele) {
            selectType(ele,rightSelect);
        })
    }
    
    markAllSelectType();
    // 单个授权
    $(document).on('dblclick', '.option-btn-add', optonAdd);

    // 批量添加
    $(document).on('dblclick','.btn-addAll-buttion',function () {
        let options = $(this).parent().prev().children("option")
        $.each(options,optonAdd);
    });

    // 授权
    function optonAdd(i,ele){
        // 1 获取加入的 option 和 所在 select 元素
        let optionEl = $(this);
        if($(ele).length != 0){
            optionEl = ele;
        }
        let leftSelectEl = $(optionEl).parent();

        // 2 获取 权限 id 和要移动的 tr 元素
        let pId = $(optionEl).data("pid");
        let leftTrEl = $("#leftTrId" + pId);

        // 3 修改 option 内容和 属性 和 tr 的 id 值
        $(optionEl).text("-");
        $(optionEl).prop("class","option-btn option-btn-rm");
        $(leftTrEl).prop("id","rightTrId" + pId);

        // 4 获取目标 table 和 select，移动 option 和 tr 对象
        let rightSelectEl = $("#authorizeSelect");
        rightSelectEl.append(optionEl);
        $("#authorizeTable").append(leftTrEl);

        // 5 修改 源和目标 select 的 size
        leftSelectEl.prop("size",parseInt(leftSelectEl.prop("size")) - 1);
        rightSelectEl.prop("size",parseInt($("#authorizeSelect").prop("size")) + 1);

        // 7 修改 rightSelectEl 和 leftSelectEl的高度 和 下边距
        selectType(leftSelectEl,rightSelectEl);
    }

    // 权限去除
    $(document).on('dblclick', '.option-btn-rm', function(e) {
        // 1 获取删除的 option 和所在的 select 元素
        let optionEl = $(this);
        let rightSelectEl = $("#authorizeSelect");

        // 2 获取权限 id 和 模块 id
        let pId = optionEl.data("pid");
        let mId = optionEl.data("mid");

        // 3 获取要移动的 tr 元素
        let rightTrEl = $("#rightTrId" + pId)[0];

        // 4 修改 option 内容 和 属性以及 tr 的 id
        optionEl.text("+");
        optionEl.prop("class","option-btn option-btn-add");
        console.log(rightTrEl);
        rightTrEl.setAttribute("id","leftTrId" + pId);

        // 5 获取目标 table 和 select 对象 并 移动 option 和 tr
        let leftSelectEl = $("#stModuleId" + mId);
        $("#tbModuleId" + mId).append(rightTrEl);
        leftSelectEl.append(optionEl);

        // 6 修改 源 和 目标 select 的 id
        rightSelectEl.prop("size",parseInt(rightSelectEl.prop("size")) - 1);
        leftSelectEl.prop("size",parseInt(leftSelectEl.prop("size")) + 1);

        // 7 当无option 时修改select 的高度 和 下编剧
        selectType(leftSelectEl,rightSelectEl);
    });
    // **********************按钮样式*************************
    $(document).on('click', '.fa-angle-ld', function(e) {
        $(this).children(".font_left").toggle();
        $(this).children(".font_down").toggle();
    });

    // **********************按钮功能*************************
    // 提交按钮触发时选中所有的 option
    $("#submitBtn").click(function () {
        // 设置 option 为选中
        $("#authorizeSelect option").prop("selected",true);
        // 提交表单
        $("#editForm").submit();
        //$(this).closest("form").submit();
    });
});